
import * as types from './../mutation-type'

import QRCode from "qrcodejs2";

import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  state: {
    authenticated: false,
    loginShow: false, //登录弹窗
    adAndRecommend:null,//底部广告和每周推荐
    name: null,
    email: null,
    userInfo: null, //用户信息
    loadIngShow: false, //load动画显示隐藏
    listModeOnOff: false, //蒙层详情
    definitionMaskOnoff: false, //高清案例蒙层
    listModeUrl: "", //蒙层的url
    listModeScrollTop: "", //蒙层的滚动条位置
    listModeInfoMsg: "", //蒙层的Id
    listModeDefinInfoMsg: "", //蒙层的Id
    listModeInfoLoding: true, //蒙层的loding
    listModeType:0,
    loginName: "login",
    toUrlMsg: "", //登陆后要跳转的页面,
    smallImgAfter: "/storage/", //图片前缀
    imgAfter: "/imagecache", //图片前缀
    sortAll: true, //分类大类全部
    bigSortName: "", //分类大类
    miniSortName: "", //分类小类
    indexMsg: {
      
    }
    // imgAfter: "http://192.168.1.162/imagecache" //图片前缀
  },
  mutations: {
    [types.UPDATE_PROFILE_NAME](state, payload) {
      state.name = payload.value;
    },
    [types.UPDATE_PROFILE_EMAIL](state, payload) {
      state.email = payload.value;
    },
    [types.SET_AUTH_USER](state, payload) {
      //获取用户信息
      state.authenticated = true;
      state.name = payload.user.name;
      state.userInfo = payload.user;
    },
    [types.UNSET_AUTH_USER](state) {
      //退出登录
      state.authenticated = false;
      state.name = null;
      state.email = null;
    },
    editAr(state,msg){//底部广告和推荐
      state.adAndRecommend = msg;
    },
    listModeShow(state, urlTop) {
      state.listModeOnOff = true;
      state.listModeUrl = urlTop.url;
      state.listModeScrollTop = urlTop.top;
      state.listModeType = urlTop.modeType;
      axios.get("/info/" + urlTop.id + "/getInfo").then(response => {
        state.listModeInfoMsg = response.data.data;
        state.listModeInfoLoding = false;
        $(".listMaskBox").css({
          width: $(window).width(),
          "min-height": $(window).height()
        });
      });
    },
    definitionMaskShow(state, urlTop) {
      //高清案例展示
      state.definitionMaskOnoff = true;
      state.listModeUrl = urlTop.url;
      state.listModeScrollTop = urlTop.top;
      axios.get("/article/" + urlTop.id + "/getinfo").then(response => {
        //案例详情
        state.listModeDefinInfoMsg = response.data.data;
        if (response.data.data.type == "1") {
          $.ajax({
            //案例的具体信息
            type: "get",
            url:"https://app.tuozhe8.com/v2/Detail/details?version=2.0&id="+response.data.data.url,
            success: function(data) {
              $(".contentMsg").html(data.data.content);
              $("img.lazy").lazyload({
                effect: "fadeIn",
                skip_invisible: "true"
              });
              $("img.lazy").attr("alt", response.data.data.title);
              var galley = document.getElementById("definitionMask");
              var viewer = new Viewer(galley, {
                // 相关配置项,详情参考官网
                navbar: false,
                url: "data-original",
                loop: false
              });
             
            }
          });
        } else if (response.data.data.type == "2") {
          $(".contentMsg").html(response.data.data.content);
          $("img.lazy").lazyload({effect: "fadeIn",skip_invisible: "true"});
          $("img.lazy").attr("alt", response.data.data.title);
          var galley = document.getElementById("definitionMask");
          var viewer = new Viewer(galley, { // 相关配置项,详情参考官网
            navbar: false,
            url: "data-original",
            loop:false
          });
          
        }
        $("#qrcode").html("");
        let qrcode = new QRCode("qrcode", {
          width: 90,
          height: 90, // 高度
          text: window.location.href, // 二维码内容
          render: "table"
        });
        state.listModeInfoLoding = false;
        $(".definitionMaksBox").css({
          "min-height": $(window).height()
        });
        $("body").css({ overflow: "auto" });
      });
    },
    listModeHide(state) {
      state.listModeOnOff = false; //案例详情蒙层开关
      state.definitionMaskOnoff = false; //高清案例蒙层详情开关
      state.listModeInfoLoding = true; //loading动画开关
      $("body").css({ overflow: "auto" });
    },
    bigSortNameShow(state, msg) {
      //给大类文字赋值
      state.bigSortName = msg;
    },
    bigSortNameHide(state, msg) {
      //清空大类
      state.bigSortName = msg;
    },
    miniSortNameShow(state, msg) {
      //给小类文字赋值
      state.miniSortName = msg;
    },
    miniSortNameHide(state, msg) {
      //清空小类
      state.miniSortName = msg;
    },
    sortAllFalse(state) {
      state.sortAll = false;
    },
    sortAllTrue(state) {
      state.sortAll = true;
    },
    loginShow(state, to) {
      //登录弹窗显示
      state.loginShow = true;
      if (to) {
        state.toUrlMsg = to.name;
      }
    },
    loginClose(state) {
      //登录弹窗隐藏
      state.loginShow = false;
    },
    loadIngShows(state) {
      //loading的显示
      state.loadIngShow = true;
    },
    loadIngHides(state) {
      //loading的隐藏
      state.loadIngShow = false;
    },
    registerLoginName(state) {
      //点击注册按钮
      state.loginName = "register";
    },
    loginLoginName(state) {
      //点击登录按钮
      state.loginName = "login";
    },
    nameChange(state, n) {
      state.userInfo.data.name = n;
    },
    getItemHome(state) {
      //首页展示信息
      axios.get("/index/getItems").then(response => {
        return (state.indexMsg = response.data);
      });
    },
    collection(state, eidType) {
      //收藏
      if (!state.userInfo) {
        this.commit("loginShow");
      } else {
        axios
          .get("/collect/" + eidType.type + "/" + eidType.id) //收藏
          .then(response => {
            if (response.data.status == 1) {
              if (eidType.type != "7") {
                state.userInfo.data.datacollects.push(eidType.id);
              } else {
                state.userInfo.data.articlecollects.push(eidType.id);
              }
              $(eidType.e.target)
                .find("i")
                .addClass("avtiveColl");
              $("body")
                .append(`<div id="collectionSuccess" style="position:fixed;left:40%;top:20%;width:300px;height:100px;text-align:center;font-size:20px;line-height:80px;z-index:999" class="alert alert-success">
                                  <a href="#" class="close" data-dismiss="alert">
                                      &times;
                                  </a>
                                  <strong>恭喜！收藏成功</strong>
                              </div>`); //我添加了一个类名是box的span标签
              $("#collectionSuccess")
                .stop(false, true)
                .animate({ opacity: "0" }, 2500, "linear", function() {
                  $("#collectionSuccess").remove();
                });
            } else if (response.data.status == 0) {
              $(eidType.e.target)
                .find("i")
                .removeClass("avtiveColl");
              $("body")
                .append(`<div id="collectionInfo" style="position:fixed;left:40%;top:20%;width:300px;height:100px;text-align:center;font-size:20px;line-height:80px;z-index:999" class="alert alert-danger">
                                    <a href="#" class="close" data-dismiss="alert">
                                        &times;
                                    </a>
                                    <strong>取消收藏</strong>
                                </div>`); //我添加了一个类名是box的span标签
              $("#collectionInfo")
                .stop(false, true)
                .animate({ opacity: "0" }, 2500, "linear", function() {
                  $("#collectionInfo").remove();
                });
              if (eidType.type != "7") {
                state.userInfo.data.datacollects.remove(eidType.id);
              } else {
                state.userInfo.data.articlecollects.remove(eidType.id);
              }
            }
          })
          .catch(error => {});
      }
    }
  },
  actions: {
    setAuthUser({ commit, dispatch }) {
      return axios
        .get("/userinfo/getuser") //获取用户信息
        .then(response => {
          commit({ type: types.SET_AUTH_USER, user: response.data });
        })
        .catch(error => {
          dispatch("refreshToken");
        });
    },
    unsetAuthUser({ commit }) {
      commit({
        type: types.UNSET_AUTH_USER
      });
    },
    refreshToken({ commit, dispatch }) {
      return axios
        .post("/token/refresh") //刷新token
        .then(response => {
          dispatch("loginSuccess", response.data);
        })
        .catch(error => {
          dispatch("logoutRequest");
        });
    },
    handleClick(tab, event) {
      //注册登录选项卡
      console.log(tab, event);
    }
  }
};